<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品详情</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
  <script src="/js/common.js"></script>
</head>
<body>

<div id="root">
  <div v-if="!goods">产品不存在</div>
  <div v-if="goods">
    <table cellpadding="0" cellspacing="0" border="1" width="700px">
      <thead>
      <tr>
        <th>商品名称</th>
        <th>原价</th>
        <th>秒杀价</th>
        <th>库存数量</th>
        <th>商品描述</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>{{goods.name}}</td>
        <td>{{goods.price}}</td>
        <td>{{goods.priceSpike}}</td>
        <td>{{goods.stock}}</td>
        <td>{{goods.detail}}</td>
      </tr>
      </tbody>
    </table>

    <br>

    <div v-if="status === 0">
      秒杀时间：
      <span>{{start | formatDate}}</span> 至 <span>{{end | formatDate}}</span> <br>
      <div style="display: inline-block">
        倒计时 <span id="remain">{{remain}}</span> 秒
      </div>
    </div>

    <div v-if="status === 1">
      <span>秒杀进行中</span>，截至时间<span>{{end | formatDate}}</span><br>
      <div>剩余时间：{{remainEnd}} 秒</div>
      <button type="button" v-on:click="buy" v-bind:disabled="queuing">立即秒杀</button>
    </div>

    <div v-if="status === 2">
      秒杀已结束
    </div>

    <div v-if="status === 3">
      商品售罄
    </div>
  </div>
</div>

<script>
  const sid = g_getQueryString("sid");
  const vm = new Vue({
    el: "#root",
    data: {
      goods: null,
      now: null,
      handler: null,
      remain: -1,
      remainEnd: -1,
      status: -1,
      queuing: false,
    },
    computed: {
      start() {
        return !!this.goods ? new Date(this.goods.startDate) : null;
      },
      end() {
        return !!this.goods ? new Date(this.goods.endDate) : null;
      },
    },
    watch: {
      now: function () {
        if (!!this.now && !!this.goods && this.goods.stock > 0) {
          if (this.now < this.start) {
            this.status = 0;
          } else if (this.now > this.end) {
            this.status = 2;
          } else {
            this.status = 1;
          }
          this.remain = Math.ceil((this.start - new Date()) / 1000);
          this.remainEnd = Math.ceil((this.end - new Date()) / 1000);
        }
      },
      goods: function () {
        if (!!this.goods && this.goods.stock <= 0) {
          this.status = 3;
          this.remainEnd = -1;
        }
      }
    },
    methods: {
      loadData() {
        this.clearHandler();
        axios.get("/goods/" + sid).then(resp => {
          this.goods = !!resp.data ? this.goods = resp.data : null;

          this.now = new Date();
          this.handler = setInterval(() => (this.remainEnd < 0) ? this.clearHandler() : this.now = new Date(), 200);
        }).catch(g_ajaxError)
      },
      clearHandler() {
        if (!!this.handler) clearInterval(this.handler);
        this.handler = null;
      },
      buy() {
        if (!sid) return;
        this.queuing = true
        axios.post("/seckill/" + sid).then(resp => {
          console.log(resp);
          if (resp.data && resp.data.success) {
            /*if (resp.data.error) {
              alert(resp.data.error);
            } else {
              window.location.href = "/order.html?id=" + resp.data.order;
            }*/
            this.waiting(resp.data.qid);
          }
        }).catch(g_ajaxError)//.finally(() => this.seckillEnable = true)
      },
      waiting(qid) {
        const params = new URLSearchParams();
        params.append("id", qid);
        axios.post("/seckill/queuing", params).then(resp => {
          if (resp.data) {
            if (resp.data.waiting) {
              setTimeout(() => this.waiting(qid), 1000);
            } else if (resp.data.success) {
              window.location.href = "/order.html?id=" + resp.data.orderId;
            }
          }
        }).catch(reason => {
          console.log(reason);
          this.queuing = false;
        });
      }
    },
    created: function () {
      this.loadData();
    },
    filters: {
      formatDate(time) {
        return g_formatDate(new Date(time), 'yyyy-MM-dd hh:mm:ss')
      }
    }
  });
  window.vm = vm;
</script>
</body>
</html>
